<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 原生DOM绑定单机事件 -->
    <button @click="handler">原生标签button</button>
    <!-- 对于原生DOM->button：上面的写法确实是单机事件 -->
    <!--底下Event1->组件标签,并非原生单机事件，而是一个自定义事件-->
    <Event1 @click.native="handler1"/>
    <!-- 对于原生标签，给他绑定自定义事件没有任何意义 -->
    <button @erha="handler">我是原生button</button>
     <Event2 @click="handler2" @xxx="handler3"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    components: {
      Event1,
      Event2,
    },

    methods: {
       //button按钮的单机事件的回调
       handler(event){
        console.log(event);
       },
       handler1(){
         alert(1231);
       },
       handler2(params){
         console.log(params);
       },
       handler3(){
         
       }

    }
  }
</script>
